<style scoped >
.login-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
}
</style>
<template>
  <div class="login-modal" v-if="authStore.showLoginModal">
    <!-- 遮罩层 -->
    <div class="mask" @click="authStore.hideLogin"></div>
    <!-- 登录表单 -->
    <div class="login-form">
      <h3>登录</h3>
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button @click="handleLogin">登录</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import service from '@/utils/request'

const authStore = useAuthStore()
const username = ref('')
const password = ref('')

// 登录逻辑
const handleLogin = async () => {
  try {
    await service.post('/api/login', { username: username.value, password: password.value })
    // 登录成功：更新状态 + 隐藏登录组件
    authStore.isLogin = true
    authStore.hideLogin()
  } catch (err) {
    console.error('登录失败', err)
  }
}
</script>